<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>天气</button>
    <select name="" id="city">
        <option value="山东">山东</option>
        <option value="香港">香港</option>
        <option value="西藏">西藏</option>
        <option value="海南">海南</option>
    </select>
    <hr>
    <h1 id="showcity"></h1>
    <script src="./lib/jquery.min.js"></script>

    <script>
        $("button").click(()=>{
            $.ajax({
               type:"get",
               url:"https://restapi.amap.com/v3/weather/weatherInfo",
               data:{
                key:"d208803c178825eda71ecfca84ea5f4c",
                city:$('#city').val(),
               },
               dataType:"jsonp",
               success:(data)=>{
                console.log(data);

                    //实时天气
              let temperature =data.lives[0].temperature;
              //报告时间
              let reporttime =data.lives[0].reporttime;
              let city = data.lives[0].city;
              $("#showcity").html(`${city}的实时温度${temperature}°C,更新时间为：${reporttime}`)
               }

            })
        })
    </script>
</body>
</html>